import { ref, type Ref } from 'vue'
import { defineStore } from 'pinia'
import { useStorage, type RemovableRef } from '@vueuse/core'
import defaultSettings from '@/settings'

export const useSettingsStore = defineStore('settings', () => {
  const title = defaultSettings.title
  const version = defaultSettings.version
  const sidebarLogo = ref<boolean>(defaultSettings.sidebarLogo)
  const layout = useStorage<string>('layout', defaultSettings.layout)

  const settingsMap: Record<string, Ref<any>> = {
    sidebarLogo,
    layout
  }

  const changeSettings = ({ key, value }: { key: string; value: any }) => {
    const setting = settingsMap[key]
    setting.value = value
  }

  return {
    title,
    version,
    sidebarLogo,
    layout,
    changeSettings
  }
})
